<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>折现图</title>
  <style type="text/css">
    #line {
      border: 1px solid #cccccc;
      border-radius: 5px;
    }
  </style>
</head>

<body>
  <canvas id="line" width="1200" height="600"></canvas>
  <script type="text/javascript">
    (function () {
      let data = [
        { value: 320, label: "苏宁易购" },
        { value: 800, label: "东方甄选" },
        { value: 640, label: "淘宝精选" },
        { value: 960, label: "京东商城" },
        { value: 1600, label: "拼 多 多" },
        { value: 160, label: "亚 马 逊" }
      ]
      let canvas = document.querySelector('#line');
      let ctx = canvas.getContext('2d');
      let width = canvas.clientWidth;
      let height = canvas.clientHeight;
      let widthHalf = width / 2;
      let heightHalf = height / 2;
      // X轴
      let XAxisColor = '#000000'
      let XAxisLineWidth = 5;
      let XAxisWidth = width * 0.8;

      // Y轴
      let YAxisColor = '#000000'
      let YAxisLineWidth = 5;
      let YAxisHeight = height * 0.8;
      let YAxisLabelCount = 10;
      let YAxisLabelHeight = YAxisHeight / YAxisLabelCount;

      // 左下角开始位置
      let translateXY = [width * .15, height - 50]
      // 折线颜色 
      let lineColor = 'red';
      // 折线宽度
      let lineWidth = 2
      // 折线提示颜色
      let tooltipTextColor = 'black';

      function start() {
        init();
        rander();
      }
      function init() {
        canvas.setAttribute('width', document.body.clientWidth || document.documentElement.clientWidth);
        ctx.beginPath();
        ctx.translate(...translateXY);

        // 绘制XY轴还有一下基础框架
        ctx.beginPath();
        ctx.moveTo(0, 0)
        ctx.lineTo(0, -YAxisHeight)
        ctx.stroke();
        ctx.fillText('Y', -3, -YAxisHeight - 3)

        ctx.beginPath();
        ctx.moveTo(0, 0)
        ctx.lineTo(XAxisWidth, 0)
        ctx.stroke();
        ctx.fillText('X', XAxisWidth + 3, 3)
      }
      function rander() {
        let maxVal = _getMaxValue();
        let pxVal = YAxisHeight / maxVal;
        let XWidth = XAxisWidth / (data.length);
        ctx.strokeStyle = lineColor;
        ctx.lineWidth = lineWidth;
        // ctx.moveTo();
        ctx.beginPath()
        data.forEach((item, index, arr) => {
          ctx.lineTo(index * XWidth + 20, -(item.value * pxVal));
          ctx.stroke();
          ctx.fillStyle = tooltipTextColor;
          // tooltip 20px 是间隔 防止第一次渲染时  贴这边
          ctx.fillText(item.value, index * XWidth + 30, -(item.value * pxVal))
        })


        ctx.beginPath()
        ctx.moveTo(0, 0)
        data.forEach((item, index) => {
          ctx.fillText(item.label, index * XWidth + 10, 30);
          // 绘制X轴辅助线
          ctx.beginPath();
          ctx.strokeStyle = tooltipTextColor
          ctx.lineWidth = .2
          ctx.moveTo(index * XWidth + 20, 10);
          ctx.lineTo(index * XWidth + 20, -(item.value * pxVal));
          ctx.stroke();
          // 绘制Y轴辅助线
          ctx.beginPath();
          ctx.strokeStyle = tooltipTextColor
          ctx.lineWidth = .2
          ctx.moveTo(0, -(item.value * pxVal));
          ctx.lineTo(index * XWidth + 20, -(item.value * pxVal));
          ctx.stroke();
        })


        let a = YAxisHeight / maxVal * (maxVal / YAxisLabelCount);
        ctx.strokeStyle = YAxisColor
        for (let i = 0; i < YAxisLabelCount + 1; i++) {
          ctx.beginPath();
          ctx.moveTo(0, -(i * a))
          ctx.lineTo(i % 3 == 0 ? -10 : -5, -(i * a))
          ctx.stroke();
          ctx.textAlign = 'center';
          ctx.fillText(maxVal / YAxisLabelCount * i, -30, -(i * a))
        }
      }

      function _getMaxValue() {
        return data.reduce((prev, item) => {
          return Math.max(prev, item.value);
        }, 0)
      }
      start()
    })()
  </script>
</body>

</html>